<template>
	<div>
		<a-list v-if="items.length > 0" :class="classNames" item-layout="horizontal" :data-source="items"
			:locale="getLocale">
			<template #renderItem="{ item, index }">
				<AppListItem :item="item" :key="index" :class="getListItemClassNames(item, true)"
					@click="handleClick(item, $event)" @dblclick="handleDbClick(item, $event)"
					@expanedChange="(value) => handleExpanedChange(item, value)">
					<template #listItemTitle v-if="item.isGroupItem">
						{{ item.srfmajortext }}
					</template>
					<template #listItemTitle v-else-if="hasSlot('listItemTitle')">
						<slot name="listItemTitle" :item="item"></slot>
					</template>
					<template #default v-if="!item.isGroupItem && hasSlot('default')">
						<slot name="default" :item="item"></slot>
					</template>
					<template #listItemIcon v-if="!item.isGroupItem && hasSlot('listItemIcon')">
						<slot name="listItemIcon" :item="item"></slot>
					</template>
					<template #listItemActions v-if="
						!item.isGroupItem &&
						(item.uIActionGroup || hasSlot('listItemActions'))
					">
						<slot v-if="hasSlot('listItemActions')" name="listItemActions" :item="item"></slot>
						<div v-else class="app-list-item-actions">
							<template v-for="(action, index1) in item.uIActionGroup" :key="index1">
								<AppButton type="link" v-show="action.visible" :disabled="action.disabled"
									@click="(event: MouseEvent) => handleActionClick(event, action, item)">
									<AppIconText :iconClass="action.showIcon && action.iconClass"
										:imgPath="action.showIcon && action.imgPath"
										:text="action.showCaption && action.caption" />
								</AppButton>
							</template>
						</div>
					</template>
				</AppListItem>
				<template v-if="item && item.isGroupItem && item.isExpand">
					<AppListItem v-for="(children, _index) in item.children" :key="_index" :item="children"
						:class="getListItemClassNames(children, true)" @click="handleClick(children, $event)"
						@dblclick="handleDbClick(children, $event)">
						<template #default v-if="hasSlot('default')">
							<slot name="default" :item="children"></slot>
						</template>
						<template #listItemTitle v-if="hasSlot('listItemTitle')">
							<slot name="listItemTitle" :item="children"></slot>
						</template>
						<template #listItemIcon v-if="hasSlot('listItemIcon')">
							<slot name="listItemIcon" :item="children"></slot>
						</template>
						<template #listItemActions v-if="item.uIActionGroup || hasSlot('listItemActions')">
							<slot v-if="hasSlot('listItemActions')" name="listItemActions" :item="children"></slot>
							<div v-else class="app-list-item-actions">
								<template v-for="(action, index1) in item.uIActionGroup" :key="index1">
									<AppButton type="link" v-show="action.visible" :disabled="action.disabled"
										@click.stop="(event: MouseEvent) => handleActionClick(event, action, children)">
										<AppIconText :iconClass="action.showIcon && action.iconClass"
											:imgPath="action.showIcon && action.imgPath"
											:text="action.showCaption && action.caption" />
									</AppButton>
								</template>
							</div>
						</template>
					</AppListItem>
				</template>
				<template v-if="
					loadMore &&
					index === items.length - 1 &&
					items.length > 0 &&
					items.length < totalRecord
				">
					<div class="load-more">
						<AppButton type="link" @click.stop="handleLoadMore">{{ $t("widget.list.loadmore",'加载更多') }}
						</AppButton>
					</div>
				</template>
			</template>
		</a-list>
		<AppEmptyDataTip v-else :emptyText="$t(emptyTextPSLanguageRes, emptyText)"></AppEmptyDataTip>
	</div>
</template>
<script setup lang="ts">
import { IParam } from '@/core';
import AppListItem from './components/list-item.vue';
import AppEmptyDataTip from '@/components/common/empty-data-tip/src/empty-data-tip.vue';
import { IListItem, ListProps } from './list';
const props = defineProps(ListProps);

const emit = defineEmits<{
	(name: 'selectionChange', selections: IParam[]): void;
	(name: 'itemClick', item: IListItem, event: MouseEvent): void;
	(name: 'itemDbClick', item: IListItem, event: MouseEvent): void;
	(
		name: 'itemActionClick',
		logic: IParam,
		data: IParam,
		event: MouseEvent
	): void;
	(name: 'loadMore'): void;
}>();

const classNames = computed(() => {
	return {
		'app-control-list__empty': props.items.length === 0,
		'app-control-list__pagination': props.loadMore,
	};
});

//  获取显示文本
const getLocale = computed(() => {
	return {
		emptyText:
			App.ts(props.emptyTextPSLanguageRes, props.emptyText) || App.ts("widget.list.nodata", '暂无数据'),
	};
});

const getSelected = (item: IListItem): boolean => {
	return (
		props.selections.findIndex((s: IParam) => s.srfkey === item.srfkey) !== -1
	);
};

//  获取列表项类名
const getListItemClassNames = (item: IListItem, isChildren = false) => {
	return {
		'app-list-item': true,
		'app-list-group-item': item.isGroupItem,
		'app-list-item__children': isChildren,
		'app-list-item--selected': getSelected(item),
	};
};

//  是否有该插槽
const hasSlot = (name: string): boolean => {
	return !!useSlots()[name];
};

const handleClick = (item: IListItem, event: MouseEvent) => {
	//  点击分组行抛出选中变更
	if (item.isGroupItem) {
		item.isExpand = !item.isExpand;
		return;
	}
	emit('itemClick', item, event);
};

const handleDbClick = (item: IListItem, event: MouseEvent) => {
	if (!item.isGroupItem) {
		emit('itemDbClick', item, event);
	}
};

const handleExpanedChange = (item: IListItem, isExpand: boolean) => {
	item.isExpand = isExpand;
};

const handleLoadMore = (e: MouseEvent) => {
	emit('loadMore');
};

const handleActionClick = (event: MouseEvent, logic: IParam, data: IParam) => {
	event.stopPropagation();
	event.preventDefault();
	emit('itemActionClick', logic, data, event);
};
</script>
